<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.png') }}">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>{% block title %}FuSite-博客{% endblock %}</title>
    <link rel="stylesheet" href="{{ 'main-css'|jscdn }}">
    <link rel="stylesheet" href="{{ 'bulma'|jscdn }}">
    {% block head %}
    {% endblock %}
</head>
<body>
    <div class="pt-6">
        <nav class="navbar is-primary container" role="navigation" aria-label="main navigation">
            <div class="navbar-brand">
                <a class="navbar-item" href="/">
                    <img src="/static/images/logo.png" width="112" height="28">
                </a>
                <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false"
                    data-target="navbarBasicExample">
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                </a>
            </div>
            <div id="navbarBasicExample" class="navbar-menu">
                <div class="navbar-start">
                    <a class="navbar-item" href="/">
                        首页
                    </a>
                    <a class="navbar-item" href="/music/index">
                        音乐
                    </a>
                    <a class="navbar-item" href="/blog/index">
                        博客
                    </a>
                    <a class="navbar-item" href="/tools/index">
                        工具
                    </a>
                    <!--<a class="navbar-item" href="/chat/index">-->
                        <!--聊天-->
                    <!--</a>-->
                </div>
                <div class="navbar-end">
                    <div class="navbar-item">
                        <div class="buttons">
                            <a class="button is-primary" href="/users/profile">
                                <strong>{{ username }}</strong>
                            </a>
                            <a href="/users/login_out" class="button is-primary">退出</a>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    </div>
    <section class="section">
        <div class="container">
            <div class="columns">
                <div class="column is-8">
                    {% block section %}
                    {% block archives %}{% endblock %}
                    {% if blogs != {} %}
                        {% for blog in blogs[page] %}
                            <div class="box" onclick="window.open('/blogs/{{ blog.文章id }}')">
                                <h1 class="is-size-5 has-text-weight-bold">
                                    <a>{{ blog['标题'] }}</a>
                                </h1>
                                <div class="is-size-7 has-text-grey-light pt-1 pb-1">
                                    <span class="mr-3">作者:{{ blog['作者'] }}</span> <span>{{ blog['上传日期']|handle_time }}发布</span> <span>{{ blog['修改日期']|handle_time }}修改</span> <span>浏览量:{{ blog['浏览量'] }}</span>
                                </div>
                                <p class="mt-3">{{ blog['描述'] }}</p>
                            </div>
                        {% endfor %}
                        <nav class="pagination is-centered" role="navigation">
                            {% if page != 1 %}
                                <a class="pagination-previous" href="?page={{ page-1 }}">上一页</a>
                            {% else %}
                                <a class="pagination-previous" href="" style="visibility: hidden;">上一页</a>
                            {% endif %}
                            {% if page != pages %}
                                <a class="pagination-next" href="?page={{ page+1 }}">下一页</a>
                            {% else %}
                                <a class="pagination-next" href="" style="visibility: hidden;">下一页</a>
                            {% endif %}
                            <ul class="pagination-list">
                                <li>
                                    <a class="pagination-link" href="?page=1">1</a>
                                </li>
                                <li>
                                    <span class="pagination-ellipsis">&hellip;</span>
                                </li>
                                {% if pages == 1 %}
                                <li>
                                    <a class="pagination-link is-current" href="?page=1">1</a>
                                </li>
                                {% elif pages == 2 %}
                                <li>
                                    {% if page == 1 %}
                                        <a class="pagination-link is-current" href="?page=1">1</a>
                                    {% else %}
                                        <a class="pagination-link" href="?page=1">1</a>
                                    {% endif %}
                                </li>
                                <li>
                                    {% if page == 2 %}
                                        <a class="pagination-link is-current" href="?page=2">2</a>
                                    {% else %}
                                        <a class="pagination-link" href="?page=2">2</a>
                                    {% endif %}
                                </li>
                                {% else %}
                                <li>
                                    {% if page == 1 %}
                                        <a class="pagination-link is-current" href="?page=1">1</a>
                                    {% elif page == pages %}
                                        <a class="pagination-link" href="?page={{ page-2 }}">{{ page-2 }}</a>
                                    {% else %}
                                        <a class="pagination-link" href="?page={{ page-1 }}">{{ page-1 }}</a>
                                    {% endif %}
                                </li>
                                <li>
                                    {% if page == 1 %}
                                        <a class="pagination-link" href="?page=2">2</a>
                                    {% elif page == pages %}
                                        <a class="pagination-link" href="?page={{ page-1 }}">{{ page-1 }}</a>
                                    {% else %}
                                        <a class="pagination-link is-current" href="?page={{ page }}">{{ page }}</a>
                                    {% endif %}
                                </li>
                                <li>
                                    {% if page == 1 %}
                                        <a class="pagination-link" href="?page=3">3</a>
                                    {% elif page == pages %}
                                        <a class="pagination-link is-current" href="?page={{ page }}">{{ page }}</a>
                                    {% else %}
                                        <a class="pagination-link" href="?page={{ page+1 }}">{{ page+1 }}</a>
                                    {% endif %}
                                </li>
                                {% endif %}
                                <li>
                                    <span class="pagination-ellipsis">&hellip;</span>
                                </li>
                                <li>
                                    <a class="pagination-link" href="?page={{ pages }}">{{ pages }}</a>
                                </li>
                            </ul>
                        </nav>
                        {% else %}
                            <div class="box">
                                <h1 class="title has-text-danger is-size-4">{% block error %}暂无文章!{% endblock %}</h1>
                            </div>
                        {% endif %}
                    {% endblock %}
                </div>
                <div class="column is-4">
                    {% block right %}
                        <div class="box">
                            <h1 class="is-size-5 title">搜索</h1>
                            <div>
                                <form action="/blog/search">
                                    <div class="field has-addons">
                                        <div class="control is-expanded">
                                            <input type="search" class="input is-primary" name="keyword" placeholder="关键字" value="{{ keyword }}">
                                        </div>
                                        <div class="control">
                                            <input class="button is-primary" type="submit" value="搜索">
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="box">
                            <h1 class="is-size-5 title">最新文章</h1>
                            {% if new_blogs %}
                                {% for new_blog_title in new_blogs %}
                                    <ul>
                                        <li><a href="/blogs/{{ new_blogs[new_blog_title] }}">{{ new_blog_title }}</a></li>
                                    </ul>
                                {% endfor %}
                            {% else %}
                                <ul><li>暂无文章</li></ul>
                            {% endif %}
                        </div>
                        <div class="box">
                            <h1 class="is-size-5 title">热门文章</h1>
                            {% if hot_blogs %}
                                {% for hot_blog_title in hot_blogs %}
                                    <ul>
                                        <li><a href="/blogs/{{ hot_blogs[hot_blog_title] }}">{{ hot_blog_title }}</a></li>
                                    </ul>
                                {% endfor %}
                            {% else %}
                                <ul><li>暂无热门文章</li></ul>
                            {% endif %}
                        </div>
                        <div class="box">
                            <h1 class="is-size-5 title">文章归档</h1>
                            {% if classification_list %}
                                {% for classification_blog_title in classification_list %}
                                    <ul>
                                        <li><a href="/blog_classification/{{ classification_list[classification_blog_title][0] }}/{{ classification_list[classification_blog_title][1] }}">{{ classification_blog_title }}</a></li>
                                    </ul>
                                {% endfor %}
                            {% else %}
                                <ul><li>暂无文章归档</li></ul>
                            {% endif %}
                        </div>
                    {% endblock %}
                </div>
            </div>
        </div>
    </section>
    <script src="{{ 'mui'|jscdn }}"></script>
    <script>
        var navbar_menu = mui(".navbar-menu")[0]
        mui(".navbar-burger")[0].addEventListener("tap",function(){
            this.classList.toggle("is-active");
            navbar_menu.classList.toggle("is-active");
        })
    </script>
    {% block end %}
    {% endblock %}
</body>
</html>
